<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="0"/>
<meta http-equiv="Cache-Control" content="no-cache"/>
<title>Email System</title>
<style>
#maskDivLoading img {
    border:0px;
    height: 30px;
    width: 30px;
}
</style>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
var appJson = "application/json";
var appForm = "application/x-www-form-urlencoded";

function autoMailHandler(obj) {
	if(obj.checked) {
		$("#eeId").css('display','inline');
	} else {
		$("#eeId").css('display','none');
	}
}


function sendBySchedulerHandler() {
	var eexpression = $('#executionExpression').val();
	if(document.getElementById('autoMail').checked ) {
		if((eexpression == null || eexpression == '')) {
	        alert("Cron Expression can be empty!")
	        return;
	    } 
	}
	
    var toAddress = $('#toAddress').val();
    
    /* if(!toAddress && (toAddress == null || toAddress == '')) {
        alert("收件人不能为空！！！")
        return;
    } */
    
    var subject = $('#subject').val();
    var content = $('#content').val();
    var mailInfo = {
            "toAddress" : toAddress,
            "subject" : subject,
            "content" : content,
            "sendingTime" : new Date(),
            "expression" : eexpression
    };
    
    $.ajax({
        url: '/sendbyscheduler',
        type: 'POST',
        contentType: appJson,
        dataType: 'json',
        data: JSON.stringify(mailInfo),
        beforeSend : function(req) {

        },
         success:function(data){
             if(data.code && data.code == 500) {
                 alert("Sending failed:<br/>" + data.message)
             } else {
                 alert("Success:" + data.sendingTime);
             }
         },
         error:function(data){
                alert("Fail");
         }
    });
}


function sendHandler() {
	
	var toAddress = $('#toAddress').val();
	
	/* if(!toAddress && (toAddress == null || toAddress == '')) {
		alert("收件人不能为空！！！")
		return;
	} */
	
	var subject = $('#subject').val();
	var content = $('#content').val();
	/* var mailInfo = {
			"toAddress" : toAddress,
			"subject" : subject,
			"content" : content,
			"sendingTime" : new Date()
	};
	 */
	var formData = new FormData();
    formData.append("toAddress",toAddress);
    formData.append("content", content);
    formData.append("subject", subject);
    formData.append("sendingTime", new Date());
    formData.append("files", $("#file1")[0].files[0]);
    formData.append("files", $("#file2")[0].files[0]);
	
	$.ajax({
        url: '/send',
        type: 'POST',
        //contentType: appJson,
        contentType : false,
        async: true,
        processData : false, 
        dataType: 'json',
        //data: JSON.stringify(mailInfo),
        data: formData,
        beforeSend : function(req) {
        	$('#maskDivLoading').show();
        },
		 success:function(data){
			 $('#maskDivLoading').hide();
			 if(data.code == 0) {
				 alert("Email sent successfully");
			 } else {
				 alert("Sending failed:<br/>" + data.msg)
				 
			 }
		 },
	     error:function(data){
	    	 $('#maskDivLoading').hide();
	    	 alert("Fail");
	     }
    });
}

$(document).ready(function(){

	var toAddress = $('#toAddress');
	$('#maskDivLoading').hide();
    $.ajax({
        url: '/toAddresses',
        type: 'GET',
        contentType: appJson,
        dataType: 'json',
        beforeSend : function(req) {
        	//var token = localStorage.getItem("token");
        	//req.setRequestHeader("Authorization", token);
        }
    }).done(function(result){
    	 for(var i in result){
             $('#toAddress').append("<option value='" + result[i] + "'>"+  result[i] +"</option>");
         }
    });
});

</script>
<style type="text/css">
Table TR TD {
	border: dotted 1px grey;
}
#main {
	 margin:0 auto; width:800px; height:400px; border:1px solid grey
}

#city {
	margin-left: 40px;
	margin-top: 20px;
}

#display {
	margin-left: 30px;
	margin-top: 20px;
}
</style>
</head>
<body>
<h1 align="center"><span id="curLoginId" style="font-weight: bold;color: green;">Send Email</span>
</h1>
<form>
	<div id="main">
		<div id="display" style="border: 1px solid grey; float: left">
			<table>
				<tr>
				<td width="150px;" >Receivers</td>
				<td width="200px;" >
				
				    <select id="toAddress" style="height: 100px" multiple="multiple" name="toAddress"  >
				         <option value=""></option>
				    </select>
				    <span style="color: red; font-size: 14px">*</span>
				</td>
				</tr>
				<tr>
				<td>Is Auto Mail</td>
				<td><input type="checkbox" name="autoMail" id="autoMail" onclick="autoMailHandler(this);">
				    <span id="eeId" style="display:none">
				        <input type="text" size="20" name="executionExpression" id="executionExpression" placeholder="Cron Expression">
				    </span>
				    <span style="color: red; font-size: 14px">*</span>
				</td>
				</tr>
				
				
				<tr>
				<td>Subject</td>
				<td><input id="subject" type="text" size=25 name="subject" /><span style="color: red; font-size: 14px">*</span></td>
				</tr>
				<tr>
				<td>Content</td>
                <td>
                <textarea id="content" rows="4" cols="80" name="content"></textarea>
                <span style="color: red; font-size: 14px">*</span></td>
				</tr>
				
				<tr>
	                <td>Attached Files</td>
	                <td>
	                   <input type="file" id="file1" name="file1" />
	                   <p/>
	                   <input type="file" id="file2" name="file1" />
	                   <p/>
	                   <div id="maskDivLoading">
					        <img alt="" src="images/sloading.gif">
					    </div>
	                </td>
                </tr>
				
				<tr>
                    <td colspan="2" align="center">
                    <input id="sendBtn" type="button" name="sendBtn" value="Send" onclick="sendHandler();"/>
                    <input id="sendByScheduler" type="button" name="sendByScheduler" value="Send By Scheduler" onclick="sendBySchedulerHandler();"/>
                    </td>
                </tr>
			</table>
		</div>
	
	</div>
	
 </form>
</body>
</html>